{% extends "V.html" %}

{% block head %}
<script type="text/javascript" src="/js/layer/layer.js"></script>
<script type="text/javascript" src="/js/dataBase.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(function(){
			loadTable(1);
		});
	});

	function addDialog(idValue,nameValue,rankValue,roleValue,handletimeValue,noteValue){
		var addTableHtml=$("#addTable").clone();
		var input_id=addTableHtml.find("input[name='id']");
		  input_id.attr("id","id");
		  if(idValue){
			input_id.attr("value",idValue);
		  }
		  var input_name=addTableHtml.find("input[name='name']");
		  input_name.attr("id","name");
		  if(nameValue){
			input_name.attr("value",nameValue);
		  }
		var input_rank=addTableHtml.find("input[name='rank']");
		  input_rank.attr("id","rank");
		  if(rankValue){
			input_rank.attr("value",rankValue);
		  }
		var input_role=addTableHtml.find("input[name='role']");
		  input_role.attr("id","role");
		  if(roleValue){
			input_role.attr("value",roleValue);
		  }
		var input_handle_time=addTableHtml.find("input[name='handle_time']");
		  input_handle_time.attr("id","handle_time");
		  if(handletimeValue){
			input_handle_time.attr("value",handletimeValue);
		  }
		var input_note=addTableHtml.find("input[name='note']");
		  input_note.attr("id","note");
		  if(noteValue){
			input_note.attr("value",noteValue);
		  }

		var buttonValue="添加";
		if(idValue){
		  buttonValue="更新";
		}

		layer.open({
					title:'添加信息',
					type: 1,
					shift:2,
					skin: 'layui-layer-rim', //加上边框
					area: ['400px', '310px'], //宽高
					content:addTableHtml.html(),
					btn:['确定','取消'],
					yes:function(index){	
						var id=$("#id").val();
						var name=$("#name").val();
						var rank=$("#rank").val();
						var role=$("#role").val();
						var handle_time=$("#handle_time").val();
						var note=$("#note").val();	
						//alert("id="+id+";name="+name+";rank="+rank+";role="+role+";handle_time="+handle_time+";note="+note);

						$.ajax({
						  type:'POST',
						  url:'/alarm_data/sla_editFun',
						  data:{id:id,name:name,rank:rank,role:role,handle_time:handle_time,note:note},
						  dataType:'text',
						  success:function(val){
							layer.close(index);
							if(val=='1'){
							  loadTable(1);
							}else{
							  layer.alert("操作失败");
							}
						  },error:function(){
							layer.close(index);
							laery.alert("操作失败");
						  }
						});
						
					}
		});
	}

	/**
  删除功能
  **/
  function delData(){
      var inputChecks=$("input:checkbox[name='dataFrom_check']:checked");
      if(inputChecks.length==0){
			layer.alert('请选中删除项！');
			return;
		}
		layer.confirm('确认删除?', {icon: 2, title:'提示'},function(index){
      var orders='';
      for(var i=0;i<inputChecks.length;i++){
        orders+=inputChecks[i].value;
        if(i!=inputChecks.length-1){
          orders+=',';
        }
      }
	  alert(orders);
      $.ajax({
        type:'POST',
        url:'/alarm_data/sla_deleteFun',
        dataType:'text',
        data:'id='+orders,
        success:function(text){
               layer.close(index);
               if(text=='1'){
                loadTable(1);
               }else{
                layer.alert('操作失败');
               }
        },error:function(){
          layer.close(index);
          layer.alert('操作失败');
        }
      });
    });
      
  }

	function keyEnter(event){
	 var e = event || window.event || arguments.callee.caller.arguments[0];
	 if(e && e.keyCode==13){ // enter 键
		 loadTable(1);
		return false;
	  }
	   
	}

	/**
  行添加双击事件
  **/
  function tab_trOnclick(){
    var trs=$("#dataFrom_table tbody tr");
    for(var i=0;i<trs.length;i++){
      $(trs[i]).on("dblclick",function(){
        var tr=$(this);
        var tds=tr.find("td");
        var id=$(tds[0]).find("input").val();
        addDialog(id,$(tds[1]).text(),$(tds[2]).text(),$(tds[3]).text(),$(tds[4]).text(),$(tds[5]).text(),$(tds[6]).text());
      });
    }
  }



	function loadTable(val){
		$("#dataFrom").find("input[name='page']").val(val);
		
		$("#dataTab").dataTable({
			title:'运维SLA实施细则划分',
			columns:[
				{key:'id',check:true,checkAll:true,width:'3%',align:'center'},		
				{key:'name',name:'项目名称',width:'20%',align:'center'},
				{key:'rank',name:'响应级别',width:'20%',align:'center'},
				{key:'role',name:'实施角色',width:'20%',align:'center'},
				{key:'handle_time',name:'处理时限',width:'20%',align:'center'},
				{key:'note',name:'备注',width:'12%',align:'center'}
			],
			formid:'dataFrom',
			loadAfter:tab_trOnclick
		});
	}

</script>

{% endblock %}

{% block content %}
<!-- 承上连接V.html：content+content-header -->
  <div class="container-fluid">

	
	<div class="row-fluid">
		<div class="span12">
		<form action="/alarm_data/sla_pagedataList" id="dataFrom" onSubmit="return false">
				<input class="btn btn-primary" type="button" name="addButton" value="添加" onclick="addDialog();" style="float:left;"/>
				{% if perms.Matrix.delete_report %}
				<input class="btn btn-danger" type="button" name="deleteButton" value="删除" onclick="delData();" style="float:left;"/>
				{% endif %}
				<input type="hidden" id="page" name="page" value="1"/>
				<input type="hidden" id="num" name="num" value="10"/>
				<div style="text-align:right;">
					<input type="text" name="tj" placeholder="请输入关键字,回车查询" id="tj" style="background-color: white;" onKeydown="keyEnter();"/>
				</div>
		</form>
		<div id="dataTab"></div>

		
		<div id="addTable" style="display:none;">
			<center>
				 <table border="0" style="color:#000;">
					<tr style="display:none;">
						<td style="text-align:right;"><span style="position:relative; top:-5px;"></span></td>
						<td><input type="text" name="id"/></td>
					</tr>
					<tr>
						<td style="text-align:right;">项目名称：</td>
						<td><input type="text" name="name"/></td>
					</tr>
					<tr>
						<td style="text-align:right;">响应级别：</td>
						<td><input type="text" name="rank"/></td>
					</tr>
					<tr>
						<td style="text-align:right;">实施角色：</td>
						<td><input type="text" name="role"/></td>
					</tr>
					<tr>
						<td style="text-align:right;">处理时限：</td>
						<td><input type="text" name="handle_time"/></td>
					</tr>
					<tr>
						<td style="text-align:right;">备注：</td>
						<td><input type="text" name="note"/></td>
					</tr>
				</table>
			 </center>
	    </div>
	  
		</div>
	</div>
  </div>

{% endblock %}
